import React, { useState, useEffect } from "react";
import { Button, Col, DatePicker, Table, Dropdown, Input, Row, Select, message, Radio, Space, Modal } from "antd";
import { SearchOutlined, DownOutlined, LoadingOutlined, SyncOutlined } from "@ant-design/icons";
import _ from "lodash";
import moment from "moment";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";

let ignore = false;
let keyword = "";

const SearchBar = ({ className, hasBackground, height }) => {
	const [searchType, setSearchType] = useState("Chain");
	const [placeholder, setPlaceholder] = useState("Search by Block / Hash / Account");

	const navigate = useNavigate();

	useEffect(() => {
		ignore = false;
		document.onkeydown =  (event) =>{
			// if(ignore) return;
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if (e && e.keyCode == 13) { // enter
				// onSearch();
				document.getElementById("btnSearch").click();
			} else {
				getKeyword();
			}
		};
		return () => {
			ignore = true;
		};
	}, []);

	const onSearch = e => {
		getKeyword();
		if (!keyword) return console.log('keyword is empty');
		let utype = "";
		let isAccoundId = keyword.length == 49 && keyword.indexOf('cX') == 0;

		if (searchType == 'Chain') {
			utype = keyword.indexOf('0x') == 0 ? 'extrinsic' : 'block';
			if (isAccoundId) {
				utype = 'account';
			}
		} else {
			utype = 'file';
			if (isAccoundId) {
				utype = 'account/storage';
			}
		}
		let url = "/" + utype + "/" + keyword;
		navigate(url);
	};
	const getKeyword = () => {
		keyword = document.getElementById("tb_keyword").value;
		return keyword;
	};
	const onClear = () => {
		keyword = "";
		document.getElementById("tb_keyword").value = keyword;
	};
	const items = [
		{
			key: "Chain",
			label: "Chain"
		},
		{
			key: "Storage",
			label: "Storage"
		}
	];
	const onDropdownChanage = ({ key }) => {
		// message.info(`Click on item ${key}`);
		setSearchType(key);
		let tmp = "Search by Fid / Account";
		if (key == "Chain") {
			tmp = "Search by Block / Hash / Account";
		}
		setPlaceholder(tmp);
	};

	return (
		<div className={className} style={{ height: height }}>
			<div className={hasBackground ? 'bar bg-bar' : 'bar no-bg-bar'}>
				<div className="search">
					<div className="search-box">
						<Dropdown
							menu={{
								items,
								onClick: onDropdownChanage
							}}
							className="ddl">
							<a onClick={e => e.preventDefault()}>
								<Space>
									{searchType}
									<DownOutlined />
								</Space>
							</a>
						</Dropdown>
						<input id="tb_keyword" className="input" type="text" placeholder={placeholder} />
						<span className="btn">
							<label onClick={onClear}>clear</label>
							<span onClick={onSearch} id="btnSearch">
								<img src={process.env.PUBLIC_URL + "/img/search.png"} />
							</span>
						</span>
					</div>
				</div>
			</div>
		</div>
	);
};

export default React.memo(styled(SearchBar)`
	display: block;	
	.bar{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.bg-bar{
		background-image: url("/img/banner.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #000;
	}
	.no-bg-bar{
		.search {
			.search-box {
				background-color: transparent!important;
				border:1px solid #000!important;
			}
		}
	}
	@media screen and (max-width: 650px) {
		.btn {
			width:60px!important;
			label{
				display: none;
			}
		}
	}
	.search {
		max-width: 1760px;
		margin: 0 auto;
		width: calc(100% - 40px);
		padding: 0 20px;
		display: block;
		.search-box {
			border-radius: 5px;
			background-color: #fff;
			height: 60px;
			display: flex;
			align-items: center;
			.ddl {
				padding-right: 5%;
				display: block;
				height: 60px;
				line-height: 60px;
				font-size: 14px;
				margin: 0 10px;
				border-right: 1px solid rgba(40, 46, 57, 1);
			}
			.input {
				height: 60px;
				line-height: 60px;
				flex: 1;
				outline: none;
				border: none;
				background-color: transparent;
				padding: 0;
				margin: 0;
			}
			.btn {
				width: 120px;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				label {
					line-height: 60px;
					font-size: 14px;
					text-decoration: underline;
					color: #282e39;
					cursor: pointer;
				}
				span {
					width: 40px;
					height: 40px;
					background-color: #000;
					border-radius: 5px;
					font-size: 14px;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					img {
						width: 25px;
						height: 25px;
					}
				}
				span:hover {
					background-color: #474747;
				}
			}
		}
	}
`);
